EP 07

2024 iThome 鐵人賽

DAY 7

Software Development

就是要來點 A.I. 的 TopAOAIConnector App系列第 7 篇

16th鐵人賽 a.i. avalonia ui

James Tsai

2024-09-20 00:05:46

40 瀏覽

分享至

Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會展開使用 Avalonia UI 技術所建立的 TopAOAIConnector App 。由於使用 Avalonia UI 可以很快速的進行各平台的桌面應用程式開發，並且透過此 TopAOAIConnector App 來串接 Azure OpenAI Service 時所需的功能研究。

本篇是 就是要來點 A.I. 的 TopAOAIConnector App 系列文的 EP07。

在前一回 EP 06 提到要繼續處理 Chat、Setting 對應 Page 的畫面設計。

同樣的概念，先在 Views 當中增加兩個 Avalonia UI 的 Page 設計：
01-1

在 C# 項目找到 "Avalonia" 再選到 "" 之後填好 "OOOOPageView" 命名(其各別為 "ChatPageView"、"SettingPageView") 並按 "新增"：
01-2

完成的結果如下圖箭頭所示：
01-3

開啟 ChatPageView 與 SettingPageView：
02-1

並在其 UserControl 當中的 Content 加入區別的文字 "This is the OOOO Page"，如下圖紅框所示：
02-2

回到 ViewModels/MainWindowViewModel.cs 當中來調整 EP06 暫時透過 OOOOViewModel 所建立的 ItemTemplate 與 CurrentPage 顯示。

把原本：

private ViewModelBase? _currentPage = new ChatPageViewModel();

改成 (點 1)：

private UserControl? _currentPage = new ChatPageView() { DataContext = new ChatPageViewModel()};

(注意此處將 ChatPageViewModel 產生出來的物件直接設定給 ChatPageView 的 DataContext 屬性)

把原本：

new ListItemTemplate(typeof(ChatPageViewModel)),
new ListItemTemplate(typeof(SettingPageViewModel))

改成 (點 2)：

new ListItemTemplate(typeof(ChatPageView), typeof(ChatPageViewModel)),
new ListItemTemplate(typeof(SettingPageView), typeof(SettingPageViewModel))

如下圖紅框所示：
03-1

把原本：

var instance = Activator.CreateInstance(value.ModelType);
if (instance is not null && instance is ViewModelBase currentPageViewModel)
    CurrentPage = currentPageViewModel;

改成：

var instance = Activator.CreateInstance(value.PageViewType);
if (instance is not null && instance is UserControl currentPageView)
{
    currentPageView.DataContext = Activator.CreateInstance(value.PaggViewModelType);
    CurrentPage = currentPageView;
}

如下圖紅框所示：
03-2

把原本：

public class ListItemTemplate(Type modelType)
{
    public string Name { get; } = modelType.Name.Replace("PageViewModel", "");
    public Type ModelType { get; } = modelType;
}

改成：

public class ListItemTemplate(Type pageViewType, Type pageViewModelType)
{
    public string Name { get; } = pageViewType.Name.Replace("PageView", "");
    public Type PageViewType { get; } = pageViewType;
    public Type PaggViewModelType { get; } = pageViewModelType;
}

如下圖紅框所示：
03-3